{#<!DOCTYPE html>#}
{#<html lang="en">#}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <title>{{ now_cls }}博客-专业IT技术发表平台</title>#}
{#    <style>#}
{#        * {#}
{#            margin: 0;#}
{#            padding: 0;#}
{#        }#}
{##}
{#        li {#}
{#            list-style: none;#}
{#        }#}
{##}
{#        a {#}
{#            text-decoration: none;#}
{#            color: inherit;#}
{#        }#}
{#        .classes_box{#}
{#            margin: 0 20px 10px;#}
{#            box-shadow: rgba(99,99,99,0.2) 0 2px 8px 0;#}
{#            display: flex;#}
{#            padding: 20px;#}
{#        }#}
{#        .classes_box li{#}
{#            margin-right: 40px;#}
{#            color: #555666;#}
{#        }#}
{#        .header{#}
{#            margin: 0 20px 10px;#}
{#            box-shadow: rgba(99,99,99,0.2) 0 2px 8px 0;#}
{#            display: flex;#}
{#            padding: 20px;#}
{#        }#}
{##}
{#        .nav {#}
{#            width: 1200px;#}
{#            margin: 20px auto;#}
{#        }#}
{##}
{#        .nav li {#}
{#            border-bottom: 2px #fafafa solid;#}
{#            padding: 20px;#}
{#        }#}
{##}
{#        .nav li h4:hover {#}
{#            color: cornflowerblue;#}
{#        }#}
{##}
{#        .nav li div {#}
{#            display: inline-block;#}
{#        }#}
{##}
{#        .nav li .left {#}
{#            width: 800px;#}
{#        }#}
{##}
{#        .nav li .right img {#}
{#            width: 200px;#}
{#            height: 90px;#}
{##}
{#        }#}
{##}
{#        .bottom-info {#}
{#            text-align: center;#}
{#            margin-top: 20px;#}
{#            color: #555666;#}
{#        }#}
{#    </style>#}
{#</head>#}
{#<body>#}
{#<div class="header">#}
{#    <div class="left">#}
{#        <a href="{% url 'index' %}">首页</a>#}
{#    </div>#}
{#    <div class="right">#}
{##}
{#    </div>#}
{#</div>#}
{#<ul class="classes_box">#}
{#    {% for i in classes %}#}
{#    <li>#}
{#        <a href="/demo/nav/{{ i }}" {% if now_cls == i %} style="background-color: cornflowerblue"#}
{##}
{#        {% endif %} >{{ i }}</a>#}
{#    </li>#}
{#    {% endfor %}#}
{##}
{##}
{#</ul>#}
{#{% if articles %}#}
{#    <ul class="nav">#}
{##}
{##}
{##}
{#    {% for article in articles %}#}
{#        <li>#}
{#            <a href={{ article.detail }}>#}
{#                <div class="left">#}
{#                    <h4>{{ forloop.counter }}、{{ article.title }}</h4>#}
{#                    <p>#}
{#                        {{ article.desc }}#}
{#                    </p>#}
{#                </div>#}
{#                <div class="right">#}
{#                    <img src={{ article.img }} alt="">#}
{#                </div>#}
{#            </a>#}
{#        </li>#}
{#        {% if forloop.last %}#}
{#            <div class="bottom-info">已经是最后一篇文章了~已经到底了~</div>#}
{##}
{#        {% endif %}#}
{##}
{##}
{#    {% endfor %}#}
{#{% else %}#}
{#    <div class="bottom-info">暂无该分类文章</div>#}
{#{% endif %}#}
{#</ul>#}
{#</body>#}
{#</html>#}
{% extends 'demo/base.html' %}
{% block header %}
    {% include 'demo/header.html' %}
{% endblock %}

{% block main %}
    {% include 'demo/classes.html' %}

    <div>
        <h4>咨询开头</h4>
        <h4>开源项目</h4>
        <h4>精选博客</h4>
        <h4>{{ block.super }}</h4>
    </div>
{% endblock %}
